{include file="header/index" /}
<div class="newContentBox">
    <form action="" class="layui-form reset-form">
        <div class="newForm">
            <div class="newGroup">
                <div class="newLabel inputText">有效日期</div>
                <div class="newGroupInput">
                    <input type="text" id="startDate"  placeholder="开始时间" readonly class="layui-input cover_layui_i newDate">
                </div>
            </div>
            <div class="newGroup">
                <div class="newLabel inputText">至</div>
                <div class="newGroupInput">
                    <input type="text" id="endDate" placeholder="结束时间" readonly class="layui-input cover_layui_i newDate">
                </div>
            </div>
            <div class="newGroup">
                <div class="newLabel inputText">客户阶段</div>
                <div class="newGroupInput">
                    <select id="user_stage" name="user_stage" class="layui-input cover_layui_i" lay-filter="aihao">
                        <option value="">全部</option>
                        {volist name="$user_stage" id="k" key="v"}
                            <option value="{$v}" >{$k}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="newGroup">
                <div class="newLabel inputText">客户等级</div>
                <div class="newGroupInput" >
                    <select id="user_grade" name="user_grade" class="layui-input cover_layui_i">
                        <option value="">全部</option>
                        {volist name="$user_grade" id="k" key="v"}
                            <option value="{$v}" >{$k}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="newGroup">
                <div class="newLabel inputText">客户来源</div>
                <div class="newGroupInput" >
                    <select id="source_type" name="source_type" class="layui-input cover_layui_i">
                        <option value="">全部</option>
                        {volist name="$source_type" id="k" key="v"}
                            <option value="{$v}" >{$k}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="newGroup">
                <div class="newLabel inputText">客户姓名|电话</div>
                <div class="newGroupInput">
                    <input type="text" id="user_keyword" placeholder="请输入客户姓名|电话"  class="layui-input cover_layui_i">
                </div>
            </div>
            <div class="newGroup">
                <div class="newLabel inputText">员工姓名|电话</div>
                <div class="newGroupInput">
                    <input type="text" id="work_keyword" placeholder="请输入员工姓名|电话"  class="layui-input cover_layui_i">
                </div>
            </div>

            <div class="newGroup newBtnBox">
                <button type="button" id="search" class="newBtnDefault newBtnPrimary">搜索</button>
                <button type="button" id="reset" class="newBtnDefault">重置</button>
            </div>
        </div>
    </form>
    <!-- 分割部分 -->
    <div class="newDivision"></div>
    <div class="newListPart">
        <div class="newTitleBox">
            <span class="layui-inline newListTitle">客户列表</span>
            <div class="layui-inline newTitleBtnBox">
                <a href="{:url('add')}"><button type="button"  class="newBtnDefault newBtnPrimary">新增客户</button></a>
                <button type="button" class="newBtnDefault newBtnGray" onclick="refresh()"><i class="fa fa-undo"></i>刷新</button>
            </div>
        </div>
        <div class="newTableBox">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th><input type="checkbox" onclick="checkAll(this)" id="all" /></th>
                        <th>客户姓名</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>客户阶段</th>
                        <th>客户等级</th>
                        <th>客户来源</th>
                        <th>有效日期</th>
                        <th>状态</th>
                        <th>所属员工</th>
                        <th>操作</th>
                    </tr> 
                </thead>
                <!--套数据 laypage-->
                <script id="list-template" type="text/html">
                    {{# for(var i=0;i<d.length;i++){  }}
                    <tr>
                        <td><input class="select" type="checkbox" name="box" value="" onclick="selectAll()" /></td>
                        <td>{{d[i].realname}}</td>
                        <td>{{d[i].gender}}</td>
                        <td>{{d[i].telphone}}</td>
                        <td>{{d[i].stage_name}}</td>
                        <td>{{d[i].grade_name}}</td>
                        <td>{{d[i].source_type_name}}</td>
                        <td>{{d[i].last_be_related_expire_time}}</td>
                        <td>{{d[i].account_status_name}}</td>
                        <td>{{d[i].source_name}}</td>
                        <td>
                            <a href="{:url('Customer/detail')}?user_id={{d[i].user_id}}" class="newBtnDefault">详情</a>
                            <a href="{:url('Customer/edit')}?user_id={{d[i].user_id}}" class="newBtnDefault">编辑</a>
                        </td>
                    </tr>
                    {{# } }}
                </script>
                <tbody id="list-content">
                </tbody>
            </table>
            <div class="pageBox">
                <span>
                    <!--批量删除-->
                </span>
                <div class="newPage" id="page"></div>
            </div>
            

        </div>

    </div>
</div>

<script>
    var layer = layui.layer,
        element = layui.element,
        laydate = layui.laydate,
        laypage = layui.laypage,
        form = layui.form,
        laytpl = layui.laytpl;

    form.render();
    // 开始时间
    laydate.render({
        elem: '#startDate',
    });
    // 结束时间
    laydate.render({
        elem: '#endDate',
    });

    // 搜索
    $("#search").click(function() {
        Ajaxpage();
    });

    // 重置
    $("#reset").click(function() {
        $('.reset-form').find('input').val('');
        $('.reset-form').find('select').val('');
        Ajaxpage();
    });

    // 刷新
    function refresh() {
        Ajaxpage();
    }

    Ajaxpage();
    function Ajaxpage(curr){
        var loadingFlag= layer.msg('正在读取数据，请稍候……', { icon: 16, shade: 0.01,shadeClose:false,time:60000 });
        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();
        var stage_name = $("#user_stage option:selected").val();
        var grade_name = $("#user_grade option:selected").val();
        var source_type = $("#source_type option:selected").val();
        var user_keyword = $("#user_keyword").val();
        var work_keyword = $("#work_keyword").val();
        $.getJSON('{:url("Customer/index")}',
            {
                page: curr || 1,
                start_time: startDate,
                end_time: endDate,
                stage: stage_name,
                grade: grade_name,
                source_type: source_type,
                user_keyword: user_keyword,
                work_keyword: work_keyword
            }, function(data){
                console.log(data);
                layer.close(loadingFlag);
                if(data.code == -1003){
                    $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
                }else{
                    var tpl = document.getElementById('list-template').innerHTML;

                    laytpl(tpl).render(data.data, function(html){
                        console.log('html',html);
                        document.getElementById('list-content').innerHTML = html;
                    });
                }
                laypage.render({
                    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: data.count //数据总数，从服务端得到
                    ,limit: data.pageSize
                    ,curr: curr || 1
                    ,prev: '上一页'//上一页
                    ,next: '下一页'//下一页
                    ,first: '首页'//首页
                    ,last: '尾页'//尾页
                    ,layout: ['count','prev', 'page', 'next','skip']
                    ,jump: function(obj, first) {
                        //页数跳转
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数
                        //首次不执行
                        if(!first){
                            //do something
                            Ajaxpage(obj.curr);
                        }
                    }
                });
            });
    }


    //复选框选中
	function checkAll(obj) {
		//alert(obj.checked);
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		//alert(userids.length);
		for(var i = 0; i < userids.length; i++) {
			userids[i].checked = obj.checked;
		}
	}
    function selectAll() {
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		var count = 0;
		//遍历所有的复选框
		for(var i = 0; i < userids.length; i++) {
			if(userids[i].checked) {
				count++;
			}
		}
		//选中复选框的个数==获取复选框的个数 
		if(count == userids.length) {
			//设置id为all复选框选中
			document.getElementById("all").checked = true;
		} else {
			//设置id为all复选框不选中
			document.getElementById("all").checked = false;
		}
	}
</script>
